<template>
    <view class="padding-bt-100 mainPage">
        <view class="padding">
            <view class="status-text text-white" v-if="info.state === 0">
                请在{{ info.expire_time }}前完成支付，超时自动取消
            </view>

            <view class="address radius-xl padding-sm bg-white margin-bottom">
                <view class="icon">
                    <image src="@/static/image/order/location.png" mode=""></image>
                </view>
                <view class="info margin-left-sm">
                    <view>
                        <text class="text-black">{{ info.name }}</text>
                        <text class="padding-left-sm">{{ info.mobile }}</text>
                    </view>
                    <view>
                        <text
                            class="gray text-sm">{{ info.province }}{{ info.city }}{{ info.area }}{{ info.street }}{{ info.address_detail }}</text>
                    </view>
                </view>
            </view>
            <!-- 预约项目 -->
            <view class="project-list padding-sm radius-xl bg-white margin-bottom-sm">
                <view class="title">
                    <text class="cuIcon-titles themeColor"></text>预约项目
                </view>
                <view class="project padding-tb-sm" v-for="(item, index) in info.projects" :key="index">
                    <image :src="item.thumb" mode="" class="image"></image>
                    <view class="proBox padding-left-sm">
                        <view class="nameandtime">
                            <view class="name text-bold text-black">{{ item.service_title }}</view>
                            <view class="time text-gray text-sm">{{ item.duration }}分钟</view>
                        </view>
                        <view class="desc text-sm text-gray margin-bottom-sm">{{ item.tips }}</view>
                        <view class="cost">
                            <view class="text-red text-bold">￥{{ item.price }}</view>
                            <view class="num text-gray">x{{ item.num }}</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 订单明细 -->
            <view class="orderInfo padding-sm radius-xl bg-white margin-bottom">
                <view class="title margin-bottom-sm">
                    <text class="cuIcon-titles themeColor"></text>订单明细
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">项目金额</view>
                    <view class="content">
                        <text class="text-bold">¥ {{ info.basic_price }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">延长金额</view>
                    <view class="content">
                        <text class="text-bold">¥ {{ info.overtime_price }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">出行费用</view>
                    <view class="content">
                        <text class="text-bold">¥ {{ info.travel_price }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">车费详情</view>
                    <view class="content">
                        <text class="text-bold">{{ info.travel_name }}</text>
                        <text class="padding-left-xs">全程{{ info.distance_text }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">支付方式</view>
                    <view class="content payType" v-if="info.pay_type === 'money'">
                        <image src="@/static/image/order/balance.png" mode="" class="payTypeImg"></image>
                        <text class="text-bold">余额支付</text>
                    </view>
                    <view class="content payType" v-else-if="info.pay_type === 'wxpay'">
                        <image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
                        <text class="text-bold">微信支付</text>
                    </view>
                    <view class="content payType" v-else-if="info.pay_type === 'alipay'">
                        <image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
                        <text class="text-bold">支付宝</text>
                    </view>
                    <view class="content payType" v-else-if="info.pay_type === 'epay'">
                        <image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
                        <text class="text-bold">易支付</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm" v-if="info.coupon_money > 0">
                    <view class="name">优惠金额</view>
                    <view class="content">
                        <text class="text-red text-bold">- ¥ {{ info.coupon_money }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name text-bold">支付金额</view>
                    <view class="content">
                        <text class="text-red text-bold">¥ {{ info.price }}</text>
                    </view>
                </view>
            </view>

            <!-- 订单详情 -->
            <view class="orderInfo padding-sm radius-xl bg-white margin-bottom">
                <view class="title margin-bottom-sm">
                    <text class="cuIcon-titles themeColor"></text>订单信息
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">客户</view>
                    <view class="content">
                        <view class="cu-avatar sm round margin-left" :style="{ backgroundImage: 'url(' + info.headimg + ')' }">
                        </view>
                        <text class="padding-left-xs text-bold">{{ info.nickname }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">订单编号</view>
                    <view class="content">
                        <text class="text-bold">{{ info.trade }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">预约时间</view>
                    <view class="content">
                        <text class="text-bold">{{ info.start_time }}</text>
                    </view>
                </view>
                <view class="crow margin-bottom-sm text-sm">
                    <view class="name">订单备注</view>
                    <view class="content">
                        <text class="text-bold">{{ info.remark }}</text>
                    </view>
                </view>
            </view>
            <view class="orderInfo padding-sm radius-xl bg-white" v-if="info.freeze_money&&info.freeze_money.length>0">
                <view class="title margin-bottom-sm">
                    <text class="cuIcon-titles themeColor"></text>冻结金额
                </view>
                <view class="crow margin-bottom-sm text-sm" v-for="item in info.freeze_money" :key="item.id">
                    <view class="name">到账时间：{{item.unfreezing_time}}</view>
                    <view class="content">
                        <text class="text-bold">¥ {{ item.money }}</text>
                    </view>
                </view>
            </view>
        </view>


        <loading v-if="pageLoading" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            pageLoading: false,
            info: {},
            addOrderShow: false
        };
    },
    onLoad(options) {
        this.getOrderInfo(options.trade)
    },
    methods: {
        getOrderInfo(trade) {
            this.$utils.$api.Orders.info({
                trade,
                action:'technician'
            }).then(data => {
                this.info = data;
            }).catch(err => {
                uni.showModal({
                    title: '提示',
                    content: err.msg,
                    showCancel: false,
                    success: () => {
                        this.$utils.$page.back();
                    }
                })
            })
        },
        endOrder() {
            this.pageLoading = true;
        },
        addOrderPopup(e) {
            this.addOrderShow = false;
        }
    }
}
</script>

<style lang="less" scoped>
.address {
    display: flex;
    align-items: center;

    .icon {
        image {
            width: 44upx;
            height: 44upx;
        }

    }
}

.project-list {
    .project {
        display: flex;

        .image {
            width: 130upx;
            height: 130upx;
            border-radius: 20upx;
        }

        .proBox {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .nameandtime,
            .cost {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}

.crow {
    justify-content: space-between
}

.step {
    display: flex;
    justify-content: flex-start;

    .content {
        margin-left: 20upx
    }
}

.payType {
    display: flex;
    align-items: center;

    .payTypeImg {
        width: 40upx;
        height: 40upx;
    }
}</style>
